<template>
  <div class="experiment">
    <h1>{{ experiment.name }}</h1>
    <div v-for="task in experiment.tasks" :key="task.id">
      <TaskComponent
        :task="task"
        @submit-task="(answers) => submitTask(task.id, answers)"
      />
    </div>
    <el-button type="success" @click="completeExperiment">完成实验</el-button>
  </div>
</template>

<script>
import TaskComponent from './TaskComponent.vue';

export default {
  name: 'ExperimentComponent',
  components: {
    TaskComponent
  },
  props: {
    experiment: {
      type: Object,
      required: true
    }
  },
  methods: {
    submitTask(taskId, answers) {
      // 提交任务答案
      console.log(`任务 ${taskId} 答案：`, answers);
    },
    completeExperiment() {
      // 完成实验
      this.$message.success('实验已完成！');
    }
  }
};
</script>

<style scoped>
.experiment {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
}
</style>